<template>
	<!-- 投诉页 -->
	<view class="mainContent">
		<view class="topText" >选择投诉的原因</view>
		<!-- 原因 -->
			<u-radio-group v-model="value"  placement="wrap" style="flex-direction: unset;">
				<u-radio 
					@change="radioChange" 
					v-for="(item, index) in list" :key="index" 
					:name="item.name"
					:label="item.label"
					:disabled="item.disabled"
					active-color="black"
					size="16px"
					labelSize="14px"
				>
				</u-radio>
			</u-radio-group>
			<!-- 详情描述 -->
			<view class="topText" style="margin:29rpx 0 32rpx 0 ;">详情描述</view>
			<u-textarea v-model="detailText" placeholder="请描述相关意见，最少输入5个字" maxlength='-1' height="362rpx" border="false"></u-textarea>
			<!-- 上传图片 -->
			<view class="updateImg">
				<view class="topText">
					添加图片说明（选填）
				</view>
				<view class="numDetail">
					{{fileList1.length}}/4
				</view>
			</view>
			<!-- 上传 -->
			<u-upload
					:fileList="fileList1"
					@afterRead="afterRead"
					@delete="deletePic"
					uploadIcon="plus"
					name="1"
					multiple
					:maxCount="4"
				></u-upload>
			<!-- 联系方式 -->
			<view class="topText" style="margin-top: 40rpx;">
				您的联系方式（选填）
			</view>
			<view class="detailInfo">
				为解决问题，必要时我们将与您联系，并绝对保护您的隐私，联系方式仅工作人员可见。账号注销/充值相关问题，请直接联系客服。
			</view>
			<u-input v-model="Contact" placeholder="请留下您的手机号码/微信/QQ" :border="false"></u-input>
			<view class="submit" style="margin-top: 132rpx;">
				<u-button size="normal" shape="circle" color="#36C46F" @click="submit">提交</u-button>
			</view>
	</view>
</template>
<script>
	const db = uniCloud.database();
	const _ = db.command;
	export default {
		data() {
			return {
				Contact:'',//联系方式
				value: '6',//原因
				fileList1:[],
				allImg:[],
				num:0,
				tv_id:'',
				tv_name:'',
				series:'',
				series_id:'',
				detailText:'',
				reason:{
					1:'包含教育信息',
					2:'包含暴力恐怖信息',
					3:'包含政治敏感信息',
					4:'包含欺诈信息',
					5:'色情低俗',
					6:'其他'
				},
				reasonInfo:'',
				list:[
					  {
							name: '1',
							label:'包含教育信息',
							disabled: false
							},
					{
							name: '2',
							label:'包含暴力恐怖信息',
							disabled: false
							},
					{
							name: '3',
							label:'包含政治敏感信息',
							disabled: false
							},
					{
							name: '4',
							label:'包含欺诈信息',
							disabled: false
							},
					{
							name: '5',
							label:'色情低俗',
							disabled: false
							},
					{
							name: '6',
							label:'其他',
							disabled: false
							},
				]
			}
		},
		onLoad(option) {
			console.log(option,'555555555');
			this.tv_id=option.tv_id
			this.tv_name=option.tv_name
			this.series=option.series
			this.series_id=option.series_id
		},
		methods: {
			// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
							console.log(event);
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							for (let i = 0; i < lists.length; i++) {
								const result = await this.uploadFilePromise(lists[i])
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
								fileListLen++
							}
						},
						async uploadFilePromise(fileURL) {
						  console.log(11111111, fileURL,999999,this.fileList1);
						  const avatarPath = vk.pubfn.createOrderNo("tx", 25);
						  await uniCloud.uploadFile({
						    filePath: fileURL.url,
						    cloudPath: avatarPath + '.jpg',
						    success: (res) => { // 注意这里不需要使用 async 或 {}
						      console.log("res=", res);
						      uniCloud.getTempFileURL({
						        fileList: [res.fileID]
						      }).then((result) => {
								  this.fileList1.map((item)=>{
									 if(fileURL.size==item.size){
										 item.url=result.fileList[0].tempFileURL
									 }
								  })
						        console.log("result=", result, this.fileList1);
						      }).catch((error) => {
								  
						        console.error("获取临时路径失败:", error);
						      });
						    },
						    fail: (error) => {
						      console.error("上传失败:", error);
						    }
						  });
						},
		// 选中某个单选框时，由radio时触发
				radioChange(e) {
					this.reasonInfo=this.reason[e]
				},
				// 提交
				submit(){
					 // 去除字符串中的所有空白字符
					this.allImg= this.fileList1.map((item)=>{
						 return item.url
					 })
					  let noSpaceStr = this.detailText.replace(/\s+/g, '');
					  if(noSpaceStr.length<5){
						  vk.toast('详情描述不少于五个字符')
						  return
					  }
					  
					  vk.callFunction({
					  	url: 'client/pages/kh/complaints',
					  	title: '请求中...',
					  	data: {
					  		user_id:vk.vuex.get('$user.userInfo._id'),
							nickname: vk.vuex.get('$user.userInfo.nickname') || "",
					  		tv_id:this.tv_id,
					  		tv_name:this.tv_name,
							series:this.series,
							series_id:this.series_id,
							_add_time:new Date().getTime(),
							_add_time_str:vk.pubfn.timeFormat(new Date(), "yyyy-MM-dd hh:mm:ss"),
							appname: vk.vuex.get('$app.appname'),
					  		appid:vk.vuex.get('$app.appid'),
							complaints_reason:this.reasonInfo,
							complaints_detail:noSpaceStr,
							complaints_img:this.allImg || [],
							complaints_phone:this.Contact || ''
					  	},
					  	success: (data) => {
					  		vk.toast('提交成功')
							setTimeout(()=>{
								wx.navigateBack()
							},1500)
					  	}
					  });
				}
		}
	}
</script>

<style scoped lang="less">
	::v-deep .u-radio{
		margin-bottom: 29rpx;
	}
	.topText{
		color: #121212;
		font-size: 32rpx;
		font-weight: 600;
		margin-bottom: 28rpx;
	}
	.mainContent{
		padding: 32rpx 40rpx 52rpx;
		.updateImg{
			display: flex;
			justify-content: space-between;
			.numDetail{
				font-weight: 500;
				font-size: 30rpx;
				color: #A6A6A6;
				line-height: 42rpx;
			}
		}
		.detailInfo{
			margin: 24rpx 39rpx 48rpx 1rpx;
			font-weight: 500;
			font-size: 22rpx;
			color: #A6A6A6;
			line-height: 30rpx;
		}
	}
	
</style>